<template>
	<view class="container">
		<u--form :model="formModel" ref="uForm" label-width='120'>
			<u-form-item label="商家门头LOGO" prop="coverUrl" borderBottom @click='upload'>
				<image style="width: 240rpx;height: 140rpx;" :src="formModel.coverUrl ? formModel.coverUrl : ''"
				 mode="aspectFill" v-if='formModel.coverUrl'></image>
				 <view v-else style="width: 140rpx;height: 50rpx;line-height: 50rpx;margin: 30rpx 0;border: 1rpx solid #999;font-size: 28rpx;color: #999;border-radius: 12rpx;text-align: center;">请上传</view>
			</u-form-item>
			<u-form-item label="商家名称" prop="name" borderBottom rightIcon='arrow-right'><u--input v-model="formModel.name" placeholder='请输入' maxlength='20' border="none" inputAlign='right'/></u-form-item>
			<u-form-item label="联系人" prop="contacts" borderBottom rightIcon='arrow-right'><u--input v-model="formModel.contacts" placeholder='请输入' maxlength='20' border="none" inputAlign='right'/></u-form-item>
			<u-form-item label="联系人手机号" prop="phone" borderBottom rightIcon='arrow-right'><u--input v-model="formModel.phone" placeholder='请输入' maxlength='11' border="none" inputAlign='right'/></u-form-item>
			<u-form-item label="选择分类" prop="tradeName" borderBottom rightIcon='arrow-right' @click='tradeShow = true'><u--input v-model="formModel.tradeName" placeholder='请选择' maxlength='20' border="none" readonly inputAlign='right'/><u-icon slot="right" name="arrow-right"></u-icon></u-form-item>
			<u-form-item label="商家坐标" prop="location" borderBottom @click="chooseLocation"><u--input v-model="formModel.location" placeholder='请选择' maxlength='20' border="none" readonly inputAlign='right'/><u-icon slot="right" name="arrow-right" ></u-icon></u-form-item>
			<u-form-item label="补全地址" prop="addr" borderBottom rightIcon='arrow-right' labelPosition='top'>
				<view style="margin-top: 14rpx;">
					<u--textarea fixed='true' v-model="formModel.addr" type='textarea' border='surround' maxlength='500' height='150rpx' placeholder='请输入' />
				</view>
			</u-form-item>
			
			<u-form-item label="商家介绍" prop="intro" borderBottom rightIcon='arrow-right' labelPosition='top'>
				<view style="margin-top: 14rpx;">				
					<u--textarea fixed='true' v-model="formModel.intro" type='textarea' border='surround' maxlength='500' height='150rpx' placeholder='请输入' />
				</view>
			</u-form-item>
		</u--form>
		<view class="footer safeArea">
			<jc-button v-if="lesseeId" :width="600" title='确认' @click='submit' backgroundColor="#DD4949"></jc-button>
			<jc-button v-else :width="600" title='免费申请入驻' @click='submit' backgroundColor="#DD4949"></jc-button>
		</view>
		<u-picker :show="tradeShow" :columns="tradeColumns" keyName='name' @cancel='tradeShow = false' @confirm='tradeConfirm'></u-picker>
	</view>
</template>

<script>
	import { trade } from '@/api/trade.js'
	import { lessee } from '@/api/lessee.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {uploadFileToService} from '@/common/utils/uploadFile.js'
	export default{
		components: {},
		data() {
			return {
				formModel: {coverUrl: '',name: '', contacts: '', phone: '', addr: '', trade: ''},
				fromRules: {
					'coverUrl' : [{type: 'string',required: true,message: '请上传门头LOGO',trigger: ['blur', 'change']},],
					'name' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'contacts' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'phone' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'addr' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'tradeName': [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'location': [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
				},
				tradeShow: false,
				tradeColumns:[],
				currentAddr: {},
				selectAddr: {},
				lesseeId: ''
			}
		},
		onLoad() {
			this.currentAddr = this.$Route.query.currentAddr
			this.getTradeList()
			if(this.$Route.query.lesseeId){
				this.lesseeId = this.$Route.query.lesseeId
				this.getItemById()
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			// var fromRules = {
			// 	'coverUrl' : [{type: 'string',required: true,message: '请上传门头LOGO',trigger: ['blur', 'change']},],
			// 	'name' : [{type: 'string',required: true,message: '请输入名称',trigger: ['blur', 'change']},]
			// 	},
			this.$refs.uForm.setRules(this.fromRules)
		},
		methods:{
			chooseLocation(){
				var latitude = 0
				var longitude = 0
				if(this.lesseeId){
					latitude = this.formModel.latitude
					longitude = this.formModel.longitude
				}else{
					latitude = this.currentAddr.location.lat
					longitude = this.currentAddr.location.lng
				}
				uni.chooseLocation({
					type: "gcj02", // 必须是gcj02
					latitude: latitude,
					longitude: longitude,
					success: (res)=>{
						this.formModel.location = JSON.stringify(res.latitude) + '，' + JSON.stringify(res.longitude)
						this.formModel.latitude = res.latitude
						this.formModel.longitude = res.longitude
						this.formModel.addr = res.address + res.name
						// this.selectAddr = res
					},
					fail(error) {
						console.log('error', error)
						// 处理获取位置信息失败的情况
						
					}
				});
			},
			upload(){
				uploadFileToService().then(res=>{
					if(res.code==10000){
						this.formModel.coverUrl = res.data.url
					}
				})
			},
			tradeConfirm(val){
				this.tradeShow = false
				this.formModel.tradeName = val.value[0].name
				this.formModel.trade = val.value[0].id
			},
			getTradeList() {
				var params = {
				}
				trade.getTradeList(params).then(res => {
					if (res.data.code == 10000) {
						var _list = res.data.data.list
						this.tradeColumns.push(_list)
					}
				})
			},
			getItemById(){
				lessee.getItemById({
					obj_id: this.lesseeId
				}).then(res => {
					if(res.data.code == 10000){
						this.formModel = res.data.data
						this.formModel.tradeName = this.formModel.tradeModel.name
						this.formModel.location = this.formModel.latitude + '，' + this.formModel.longitude
					}
				})
			},
			submit() {
				// if(!this.formModel.coverUrl){
				// 	uni.showToast({
				// 		title: '请上传门头LOGO',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				this.$refs.uForm.validate().then(res => {
					if(this.lesseeId){
						this.formModel.obj_id = this.lesseeId
						lessee.updateLessee(this.formModel).then(res => {
							if(res.data.code == 10000){
								uni.navigateBack()
								uni.showToast({
									title: '申请成功',
									icon: 'none'
								})
							}
						})
					}else{
						lessee.lesseeCheckin(this.formModel).then(res => {
							if(res.data.code == 10000){
								uni.navigateBack()
								uni.showToast({
									title: '申请成功',
									icon: 'none'
								})
							}
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		height: 100vh;
	}
	.footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
	}
</style>